import React, { Component } from "react";

// 受控组件 --- value 配合 onChange 且value的值为state中的值
export default class App extends Component {
    // ref的字符串类型被废弃，在严格模式下是报出警告
    fileRef = React.createRef()
    imgRef = React.createRef()

    handler = () => {
        // 获取ref对象下的标签对象(子集)
        const files = this.fileRef.current.files
        // 创建读取文件的实例
        const reader = new FileReader()
        // readAsDataURL 方法会读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState 会变成
        // 已完成DONE，并触发 loadend (en-US) 事件，同时 result 属性将包含一个data:URL格式的字符串
        // （base64编码）以表示所读取文件的内容
        reader.readAsDataURL(files[0])
        var that = this
        reader.onload = function () {
            that.imgRef.current.src = this.result
        }
    }
    render() {
        return (
            <div>
                <input ref={this.fileRef} type="file" onChange={this.handler} />
                <img ref={this.imgRef} src="" alt="" />
                <button onClick={this.handler}>获取数据</button>
            </div>
        )
    }
}